<template>
	<view>
		<view>
			<image class='block w-full' src="/static/test/111.png"></image>
		</view>
		<view class="mt-3-4">
			<view class='mb-2-2 mx-3-1'>
				<text class='text-n font-semibold'>已报名</text>
			</view>
			<uni-grid :column="5" :showBorder="false"  :square="false">
				<uni-grid-item  v-for="el in joinData">
					<view class='text-center pb-3-1'>
						<image src="/static/login/login-bg.png" class='avater-img'></image>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
		<view class='mt-3 mx-5-4'>
			<self-button>已报名，邀请好友一起参加</self-button>
		</view>
		<view class='mt-2-2 text-center'>
			<text class='color-secondary-3 text-n'>您当前可以邀请1位好友一起参加</text>
		</view>
		<view class="mt-3-4">
			<view class='mb-2-2 mx-3-1'>
				<text class='text-n font-semibold'>我的邀请</text>
			</view>
			<view class='flex '>
				
			</view>
		</view>
	</view>
</template>

<script>
	import { ref } from "vue";
	import SelfButton from "@/components/common/SelfButton.vue";
	export default {
		components: {
			SelfButton
		},
		setup(){
			const joinData = ref([{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]);
			return {
				joinData
			};
		}
	}
</script>

<style>
	.avater{
		width: 92rpx;
		height: 92rpx;
		border-radius: 92rpx;
	}
	.avater-img{
		width: 92rpx;
		height: 92rpx;
	}
</style>
